<template>
  <div class="home">
    <h1>vue+ts+setup+volar</h1>
    <button @click="addCount(2)">{{ count }}</button>
    <button>{{ num }}</button>
    <button v-if="flag">{{ str }}</button>
    <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    <step :value="num" :max="200" @change="num = $event"></step>
    <div
      :style="{ width: num + 'px', height: num + 'px', borderRadius: num + 'px', border: '1px solid #f00' }"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import step from '@/components/SetpCom.vue'
// javascript数据类型：number，string，boolean，undefined，null
// 引用类型：数组，对象，function
// ts：any任意类型,void没有返回值,interface接口
// 一、声明变量
import { ref, reactive } from 'vue'
const count = ref<number>(10);
const num = ref(5);
const str = ref<string>("i love ts")
const flag = ref<boolean>(true)
// 定义函数
function addCount(n: number): void {
  count.value += n;
}
// 声明一个接口
interface Iuser {
  name: string,
  age: number,
  pet: undefined | string
}
const list = reactive<Iuser>({ name: "mumu", age: 18, pet: "dog" })
function changeHd(e: number) {
  alert(e);
}
</script>
